<template>
  <!--
   * @FileDescription: 公共标题  日期 and 回退
   * @author Sun Yan
   * @Date $
  -->
  <div class="root-nav-title-container">
    <div class="root-nav-title">
      <p class="root-nav-title-text --h1-font-size">
        {{ title }}
      </p>
      <p class="root-nav-title-count">总人数： {{ count }}</p>
      <el-button  class="root-nav-btn-back hidden-sm-and-up" plain round type="primary" v-if="isBack" @click="pageGoBack">
        <i class="icon-iconfont icon-withdraw"></i>
        {{ backText }}
      </el-button>
    </div>
    <div class="navigation-go-back-container">
      <span class="date-time">
        <span class="hidden-md-and-down">{{ new Date().Format('yyyy年MM月dd日') }}</span>
        <span style="margin: 0 11px">{{ getTime }}</span>
        <span>{{ bayText }}</span>
      </span>
      <span class="icon-iconfont" :class="isBay"></span>
      <el-button class="root-nav-btn-back hidden-sm-and-down" plain round type="primary" v-if="isBack" @click="pageGoBack">
        <i class="icon-iconfont icon-withdraw"></i>
        {{ backText }}
      </el-button>
    </div>
  </div>
</template>
<script>
import {getDay} from "@u";

/**
 * @description: 方法描述
 * @param title { String | Number} 标题名称
 * @param count {String | Number } 在线人数
 * @return void
 */
export default {
  props: {
    title: {
      type: String | Number,
      default: '途夫书院',
    },

    count: {
      type: String | Number,
      default: '0',
    },

    isBack: {
      type: Boolean,
      default: true,
    },

    backText: {
      type: String,
      default: '退出'
    }

  },
  name: "root-nav-title",
  data() {
    return {
      bayText: '',
      bayState: true,
      getTime: new Date().Format('HH:mm:ss'),
    }
  },
  computed: {
    isBay() {
      return this.bayState ? 'icon-baitian' : 'icon-night'
    }
  },


  created() {
    this.setTime();
  },

  methods: {
    setTime() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let text = ``;
      // 判断当前时间段
      if (hours >= 5 && hours <= 20) {
        // this.bayText = `早上好`;
        this.bayState = true;
      } else {
        // this.bayText = `晚上好`;
        this.bayState = false;
      }
      console.log(this.bayState)
      this.bayText = getDay();
      this.getTime = timeNow.Format('HH:mm:ss');
      window.setTimeout(_=> this.setTime(), 1000); // 1s 更新一次视图数据
    },
    pageGoBack() {
      if (this.$listeners['pageGoBack']) {
        this.$emit('pageGoBack');
      } else {
        this.$router.goBack(-1)
      }
    },
  }
}
</script>

<style lang="scss">
.root-nav-btn-back {
  background-color: transparent !important;
  border-color: $com-border-color !important;
  @include sc(var(--normal-font-size), $com-color-white);
  padding: 5px !important;
  display: flex;
  align-items: center;
  .icon-iconfont {
    margin-right: 6px;
    font-weight: bold;
    color: $com-color-primary-disable;
    font-size: var(--normal-font-size);
  }
}

.root-nav-title-container {
  position: relative;
  z-index: var(--z-fixed);
  @include wh(100vw, 88px);
  overflow: hidden;

}


.root-nav-title {
  @include wh(640px, 88px);
  background: $com-bg-color-nav;
  text-align: center;
  margin: 0 auto;
  position: relative;
  padding-top: var(--mb-0-5);
  &:after {
    content: ' ';
    border-right: 39px solid $com-bg-color-nav;
    border-bottom: 90px solid transparent;
    position: absolute;
    left: -39px;
    top: 0;
  }

  &:before {
    content: ' ';
    border-left: 39px solid $com-bg-color-nav;
    border-bottom: 90px solid transparent;
    position: absolute;
    right: -39px;
    top: 0;
  }

  .root-nav-title-text {
    color: $com-color-bright;
    font-weight: 400;
    letter-spacing: 1px;
    &:before, &:after {
      z-index: 99;
      content: '';
      width: 28px;
      height: 1px;
      position: absolute;
      bottom: 0;
      left: 0px;
      background-color: $com-color-bright;
    }
    &:after {
      left: -14px;
      transform: rotate(66deg) translateX(-50%);
    }
  }

  .root-nav-title-count {
    height: 33px;
    @include sc(var(--normal-font-size), $com-color-white, 33px, bold);
    font-stretch: normal;
    letter-spacing: 1px;
    &:before, &:after {
      content: '';
      z-index: 99;
      width: 28px;
      height: 1px;
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: $com-color-bright;
    }

    &:after {
      right: -14px;
      transform: rotate(118deg) translateX(-50%);
    }
  }
}

.navigation-go-back-container {
  width: auto;
  height: 28px;
  position: fixed;
  right: 20px;
  top: 33px;
  display: flex;
  align-items: center;
  z-index: var(--z-fixed);
  color: $com-text-color-inverse;
  .date-time {
    //flex: 0 0 170px;
  }
  > span {
    margin-right: 11px;
  }

  > .icon-iconfont {
    font-size: 26px;
  }
}


.root-nav-title-container {
  @include respond-to('sx') {
    @include wh(100vw, 50px);
    .root-nav-title {
      @include wh;
      padding: 0 11px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      &:after,
      &:before {
        display: none;
      }

      &:after {
        display: block;
        content: " ";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        height: 1px;
        border-bottom: 1px solid $com-border-color;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        z-index: 2;//看情况使用
      }
    }

    .root-nav-title-text,
    .root-nav-title-count {
      width: auto;
      display: flex;
      align-items: center;
      &:after,
      &:before {
        display: none;
      }
    }

    .navigation-go-back-container {
      display: none !important;
    }
  }
}


</style>